<html>
  <head>
    <title>监听器 watch</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <h2 class="title">
      <a href="../index.html" style="text-decoration: none; color: #2c3e50">>back</a>
    </h2>
    <div id="root">
      <h3>Watch 用法1：常见用法</h3>
      <input v-model="message" />
      <span>{{copyMessage}}</span>
    </div>
    <div id="root2">
      <h3>Watch 用法2：绑定方法</h3>
      <input v-model="message" />
      <span>{{copyMessage}}</span>
    </div>
    <div id="root3">
      <h3>Watch 用法3：deep + handler</h3>
      <input v-model="deepMessage.a.b" />
      <span>{{copyMessage}}</span>
    </div>
    <div id="root4">
      <h3>Watch 用法4：immediate</h3>
      <input v-model="message" />
      <span>{{copyMessage}}</span>
    </div>
    <div id="root5">
      <h3>Watch 用法5：绑定多个 handler</h3>
      <input v-model="message" />
      <span>{{copyMessage}}</span>
    </div>
    <div id="root6">
      <h3>Watch 用法6：监听对象属性</h3>
      <input v-model="deepMessage.a.b" />
      <span>{{copyMessage}}</span>
    </div>

    <script>
      new Vue({
        el: '#root',
        watch: {
          message(value) {
            this.copyMessage = value
          },
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: '',
          }
        },
      })
      new Vue({
        el: '#root2',
        watch: {
          message: 'handleMessage',
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: '',
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          },
        },
      })
      new Vue({
        el: '#root3',
        watch: {
          deepMessage: {
            handler: 'handleDeepMessage',
            deep: true,
          },
        },
        data() {
          return {
            deepMessage: {
              a: {
                b: 'Deep Message',
              },
            },
            copyMessage: '',
          }
        },
        methods: {
          handleDeepMessage(value) {
            this.copyMessage = value.a.b
          },
        },
      })
      new Vue({
        el: '#root4',
        watch: {
          message: {
            handler: 'handleMessage',
            immediate: true,
          },
        },
        data() {
          return {
            message: 'Hello Vue',
            copyMessage: '',
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          },
        },
      }),
        new Vue({
          el: '#root5',
          watch: {
            message: [
              {
                handler: 'handleMessage',
              },
              'handleMessage2',
              function (value) {
                this.copyMessage = this.copyMessage + '...'
              },
            ],
          },
          data() {
            return {
              message: 'Hello Vue',
              copyMessage: '',
            }
          },
          methods: {
            handleMessage(value) {
              this.copyMessage = value
            },
            handleMessage2(value) {
              this.copyMessage = this.copyMessage + '*'
            },
          },
        })
      new Vue({
        el: '#root6',
        watch: {
          'deepMessage.a.b': 'handleMessage',
        },
        data() {
          return {
            deepMessage: { a: { b: 'Hello Vue' } },
            copyMessage: '',
          }
        },
        methods: {
          handleMessage(value) {
            this.copyMessage = value
          },
        },
      })
    </script>
  </body>
</html>
